<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Playlist Details</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <!-- JavaScript 文件 -->
    <script src="{{ url_for('static', filename='playlist_detail.js') }}" defer></script>

</head>
<style>
    /* 基本样式 */
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 0;
        padding: 0;
    }

    .main-content {
        padding: 20px;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .playlist-header, .singer-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .playlist-image, .singer-image {
        width: 150px;
        height: 150px;
        border-radius: 10px;
        margin-right: 20px;
    }

    .playlist-details, .singer-details {
        flex-grow: 1;
    }

    .playlist-bio, .singer-bio {
        margin-top: 10px;
        font-size: 14px;
        color: #555;
    }

    .songlist__header {
        display: grid;
        grid-template-columns: 2fr 2fr 2fr 1fr 1fr;
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
        text-align: center;
    }

    .songlist__header li {
        font-weight: bold;
    }

    .songlist_list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .songlist_list li {
        display: grid;
        grid-template-columns: 2fr 2fr 2fr 1fr 1fr;
        justify-items: center;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }

    .songlist_list li .song-title,
    .songlist_list li .song-artist,
    .songlist_list li .song-album,
    .songlist_list li .song-duration {
        text-align: center;
    }

    .songlist_list li button {
        background: #007bff;
        color: #fff;
        border: none;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
        margin-left: 10px; /* 给按钮留一点左边距 */
    }

    .navbar {
        background-color: #333;
        color: #fff;
        padding: 10px 0;
    }

    .navbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .navbar .logo a {
        color: #fff;
        text-decoration: none;
        font-size: 24px;
    }

    .navbar nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
    }

    .navbar nav ul li {
        margin-left: 20px;
    }

    .navbar nav ul li a {
        color: #fff;
        text-decoration: none;
    }

    .footer {
        background-color: #333;
        color: #fff;
        padding: 10px 0;
        text-align: center;
        margin-top: 20px;
    }
</style>

<body>
   <!-- 导航栏 -->
   <header class="navbar">
       <div class="container">
           <div class="logo">
               <a href="#">Music Website</a>
           </div>
           <nav>
               <ul>
                   <li><a href="shouye.html">首页</a></li>
                   <li><a href="#">发现</a></li>
                   <li><a href="singer_list.html">歌手</a></li>
                   <li><a href="#">排行榜</a></li>
                   <li><a href="#">我的音乐</a></li>
               </ul>
           </nav>
       </div>
   </header>

   <!-- 主要内容 -->
   <main class="main-content">
        <div class="container">
            <!-- 歌单详情部分 -->
            <section class="playlist-details">
                <div class="playlist-header">
                    <img id="playlistCover" src="https://via.placeholder.com/150" alt="Playlist Cover" class="playlist-image">
                    <div class="playlist-details">
                        <h1 id="playlistName">歌单名称</h1>
                        <p id="playlistDesc" class="playlist-bio">歌单简介的部分内容...</p>
                    </div>
                </div>
            </section>

            <!-- 歌曲列表部分 -->
            <section id="songSection" class="playlist-songs">
                <h2>歌曲列表</h2>
                <ul class="songlist__header">
                    <li class="songlist__header_name">歌曲</li>
                    <li class="songlist__header_artist">歌手</li>
                    <li class="songlist__header_album">专辑</li>
                    <li class="songlist__header_time">时长</li>
                </ul>
                <ul id="songList" class="songlist_list">
                    <!-- 示例歌曲列表项 -->
                    <!-- 更多歌曲列表项 -->
                </ul>
            </section>
        </div>
    </main>
    <div id="music-player">
        <img id="album-cover" class="album-cover" src="" alt="Album Cover">
        <div class="song-info">
            <div id="song-name">Song Name</div>
            <div id="singer-name">Singer Name</div>
        </div>
        <div class="controls">
            <button class="control-button" id="prev-button">⏮</button>
            <button class="control-button" id="play-button">▶️</button>
            <button class="control-button" id="next-button">⏭</button>
        </div>
        <div class="time-container">
            <div id="current-time">0:00</div>
            <div class="progress">
                <input type="range" id="progress-bar" min="0" max="100" step="1">
            </div>
            <div id="total-time">0:00</div>
        </div>
        <div id="current-lyric"></div>
        <div class="volume">
            <label for="volume-slider">音量</label>
            <input type="range" id="volume-slider" min="0" max="1" step="0.01">
        </div>
        <div class="play-mode" id="play-mode">🔁</div>
        <button class="lyrics" id="lyrics-button">显示歌词</button>
    </div>
    <div id="lyrics-modal">
        <div id="close-lyrics">关闭</div>
        <div id="lyrics-content">歌词内容</div>
    </div>

   <!-- 页脚 -->
   <footer class="footer">
       <div class="container">
           <p>&copy; 2024 Music Website. All rights reserved.</p>
       </div>
   </footer>
</body>
</html>